<#include "../common/_header.htm">
<script src="${ctx}/plugins/d3/js_re/D3ForceService.js"></script>
<script src="${ctx}/plugins/d3/js_re/saveSvgAsPng.js"></script>
<style>
	.fl{float:left;}
	.d3-toolbox{display:block;position:fixed;left:19px;top:15px;width:220px;min-height:100px;border:1px solid #ddd;background:#fff;}
	.d3-viewbox{margin:11px;float:left;}
	.d3-viewbox2{padding:5px;margin:5px;float:left;border:1px solid #ddd;}
	.d3-view-type{float:left;width:60px;height:24px;line-height:24px;border:1px solid #ddd;color:#000;font-family:微软雅黑;margin-left:5px;border-radius:3px;display: block;text-align:center;cursor:pointer;}
	.d3-view-type:hover{border:none;color:#fff;background:#52a1fe;}
	.d3-view-type.current{border:none;color:#fff;background:#52a1fe;cursor:auto;}
	.d3-purple{float:left;width:90px;height:16px;color:#fff;background:#7200da;}
	.d3-yellow{float:left;width:90px;height:16px;color:#fff;background:#f9c00c;}
	.d3-blue{float:left;width:90px;height:16px;color:#fff;background:#007efe;}
	.d3-money{float:left;margin:5px 0;}
	.d3-money input{width:100px;border:1px solid #ddd;}
	.d3-button{width:85px;height:30px;line-height:30px;color:#fff;background:#52a1fe;font-family:微软雅黑;border-radius:3px;display: block;text-align:center;cursor:pointer;}
	.link {fill: none;stroke: #ccc;stroke-width: 1.5px;}
	.d3-viewbox3{margin:11px 11px 0 11px;float:left;}
	.dc {margin-left:5px;}
</style>
<div id="hidebox" style="height:100%;width:100%">
</div>
<div class="set-d3box" title="点击伸缩工具框">M</div>
<div class="d3-toolbox">
	<div class="d3-viewbox"><font class="fl">切换：</font><span class="d3-view-type current" id="force">关系图</span><span class="d3-view-type" id="tree">树状图</span></div>
	<div class="d3-viewbox3 n1"><input id="cbox" type="checkbox"  value="开启力导向"  checked="checked" ></input><label for="cbox">开启力导向</label></div>
	<div class="d3-viewbox n2"><font class="fl">默认颜色：</font><span class="d3-blue"></span></div>
	<div class="d3-viewbox2 n2"><font class="fl">颜色设置1：</font><span class="d3-purple"></span><span class="d3-money">最小金额：<input value="10000000" id="level2min"></input>&nbsp;元</span></div>
	<div class="d3-viewbox2 n2"><font class="fl">颜色设置2：</font><span class="d3-yellow"></span><span class="d3-money">最小金额：<input value="1000000" id="level1min"></input>&nbsp;元</span><span class="d3-money">最大金额：<input id="level1max" value="10000000"></input>&nbsp;元</span></div>
	<div class="d3-viewbox" align="center"><span class="d3-button refresh fl">重新加载</span><div class="dc d3-button fl" align="center">导出</div></div>
</div>
<script>
$(function() {
	var d3view = new d3ForceService();
	d3view.arrowShow=true;
	var d3view2 = new d3TreeService();

    $(".set-d3box").click(function(){
        $(".d3-toolbox").fadeToggle(500);
    })
    $(".dc").click(function(){
    	if($("#force").hasClass("current")){
	    	d3view.scale_var=1
			d3view.translate_var=new Array(0,0);
			d3view.zoom.translate(d3view.translate_var);
			d3view.zoom.scale(d3view.scale_var);
			d3view.svg.attr("transform", "translate(" + d3view.translate_var + ")scale(" + d3view.scale_var + ")");
			
			if(d3view.theMinx<0) d3view.translate_var[0]=100-d3view.theMinx;
			if(d3view.theMiny<0) d3view.translate_var[1]=100-d3view.theMiny;
			
			d3view.svg.attr("transform", "translate(" + d3view.translate_var + ")scale(" + d3view.scale_var + ")");
			saveSvgAsPng($("svg")[0], "流出卡号交易图.png",{height:(d3view.theMaxx-d3view.theMinx+400),width:(d3view.theMaxy-d3view.theMiny+400)});
    	}else{
    		d3view2.scale_var=1
			d3view2.translate_var=new Array(200,150);
			d3view2.svg.attr("transform", "translate(" + d3view2.translate_var + ")scale(" + d3view2.scale_var + ")");
			saveSvgAsPng($("svg")[0], "流出卡号交易图.png",{height:2000,width:2000});
    	}
    })
    
    $("#cbox").change(function() { 
    	d3view.DoChangeForce(!$(this).prop("checked"));
   	});
	
	/** 回去传值 **/
	var dialog = top.dialog.get(window);
    var data = dialog.data; // 获取对话框传递过来的数据
    
    $(document).on("click","#tree",function(){
		if(!$(this).hasClass("current")){
			$(".d3-view-type").removeClass("current");
			$(this).addClass("current");
		}
		$.ajax({
		    url: '${ctx}/bill/stream/d3/getOutD3Tree',
		    type: 'post',
		    async:true,
		    contentType: "application/json;charset=UTF-8",
		    data: JSON.stringify(data),
		    dataType: 'json',
		    success:function (obj) {
		    	d3view2.reload(obj.nodes,obj.links,"#hidebox");
		    }
		});
		$(".n1").hide();
		$(".n2").show();
	});
    $(document).on("click","#force",function(){
		if(!$(this).hasClass("current")){
			$(".d3-view-type").removeClass("current");
			$(this).addClass("current");
		}
		$.ajax({
		    type : 'post',
		    async :true,
		    data: JSON.stringify(data),
		    url : '${ctx}/bill/stream/d3/inaccountstatistics_d3',
		    contentType: "application/json;charset=UTF-8",
		    dataType: 'json',
		    success:function (result) {
	            if(result.data.nodes.length){
	            	d3view.reload(result.data.nodes,result.data.links,"#hidebox");
	            }else{
	            }
		    }
		});
		$(".n1").show();
		$(".n2").hide();
	});
    $(document).on("click",".refresh",function(){
		d3view.level1.min=Number($("#level1min").val());
		d3view.level1.max=Number($("#level1max").val());
		d3view.level2.min=Number($("#level2min").val());
		d3view2.level1.min=Number($("#level1min").val());
		d3view2.level1.max=Number($("#level1max").val());
		d3view2.level2.min=Number($("#level2min").val());
		if($("#tree").hasClass("current")){
			d3view2.refresh();
		}else{
			d3view.refresh();
		}
	});
    $("#tree").click();
});
</script>

<style>
	#hidebox {
		top: 23px;
		left: 2%;
		border-radius: 5px;
		background-color:#fff;
		z-Index:9999;
		padding: 10px;
		overflow:hidden;
	}
	.set-d3box{
		width: 30px;
		height: 30px;
		background-color: #87CEFA;
		border-radius: 50%;
		line-height: 30px;
		text-align: center;
		color: white;
		position: absolute;
		top: 0px;
		z-index: 9;
		cursor:pointer;
	}
	.set-d3box:active {
		background-color: #00BFFF;
	}
</style>
</body>
</html>